<template>
    <div>
        <el-card class="box-card" shadow="never">
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" :model="form" class="edit-el-form" :rules="rules" label-width="auto">
                <el-row>
                  <el-col :span="11">
                     <el-form-item label="是否开启自动审核" prop="auto_audit">
                         <el-switch
                            v-model="form.auto_audit"
                            active-value='1'
                            inactive-value='0'
                            active-color="#13ce66"
                            >
                          </el-switch>
                     </el-form-item>
                  </el-col>
                  <el-col :span="11">
                     <el-form-item label="自动审核时长" prop="auto_audit_time">
                         <el-input placeholder="请输入内容" v-model="form.auto_audit_time">
                            <template slot="append">分钟</template>
                         </el-input>
                     </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='11'>
                    <el-form-item label="初审--全车照片示范" prop="first_img_example">
                        <Upload :limit="1" :file_list="first_img_example_list" :catch_urls="catch_first_img_example_urls" :remove_urls="remove_first_img_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="初审图二爆胎示范" prop="second_img_one_example">
                        <Upload :limit="1" :file_list="second_img_one_example_list" :catch_urls="catch_second_img_one_example_urls" :remove_urls="remove_second_img_one_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='11'>
                    <el-form-item label="初审图二鼓包示范" prop="second_img_two_example">
                        <Upload :limit="1" :file_list="second_img_two_example_list" :catch_urls="catch_second_img_two_example_urls" :remove_urls="remove_second_img_two_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="初审--年周+行驶证" prop="three_img_example">
                        <Upload :limit="1" :file_list="three_img_example_list" :catch_urls="catch_three_img_example_urls" :remove_urls="remove_three_img_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='11'>
                    <el-form-item label="初审图四爆胎示范" prop="four_img_one_example">
                        <Upload :limit="1" :file_list="four_img_one_example_list" :catch_urls="catch_four_img_one_example_urls" :remove_urls="remove_four_img_one_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="初审图四鼓包示范" prop="four_img_two_example">
                        <Upload :limit="1" :file_list="four_img_two_example_list" :catch_urls="catch_four_img_two_example_urls" :remove_urls="remove_four_img_two_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='11'>
                    <el-form-item label="复审条码示范" prop="bar_img_example">
                        <Upload :limit="1" :file_list="bar_img_example_list" :catch_urls="catch_bar_img_example_urls" :remove_urls="remove_bar_img_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="终审轮胎销毁示范" prop="destory_img_example">
                        <Upload :limit="1" :file_list="destory_img_example_list" :catch_urls="catch_destory_img_example_urls" :remove_urls="remove_destory_img_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="终审车店合影示范" prop="shop_img_example">
                        <Upload :limit="1" :file_list="shop_img_example_list" :catch_urls="catch_shop_img_example_urls" :remove_urls="remove_shop_img_example_urls" :upload_tip="upload_tip"></Upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="登录条款" prop="login_agreement">
                      <Editor :catchData="catchData" :child_content="child_content"></Editor>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import { SettingInfo,SettingEdit } from '@/api/setting.js'
    import Upload from '@/components/Upload.vue';
    import Editor from '@/components/Editor.vue';
    export default {
        name:'Setting',
        components:{ Upload,Editor },
        data() {
            let validateInt=(rule,value,callback)=>{
               let int_reg=/^([0-9]{1,})$/;
               let int_arr={
                auto_audit_time:'自动审核时长'
               };
               let rule_name=int_arr[rule.field];
               if(value==''){
            	   callback(new Error('请输入'+rule_name));
               }
               if(!int_reg.test(value) || value==0){
            	  callback(new Error(rule_name+'必须为正整数'));
               }else{
            	  callback();
               }
            }
            return {
                form: {
                   auto_audit: 1,
                   auto_audit_time:30,   //默认30分钟
                   first_img_example:'',
                   second_img_one_example:'',
                   second_img_two_example:'',
                   three_img_example:'',
                   four_img_one_example:'',
                   four_img_two_example:'',
                   bar_img_example:'',
                   destory_img_example:'',
                   shop_img_example:'',
                   login_agreement:''
                },
                rules:{
                    auto_audit_time:[
                        { validator:validateInt, trigger:"blur"}
                    ]
                },
                id:-1,
                content:'设置相关',
                loading:false,
                button_name:'立即提交',
                first_img_example_list:[],
                second_img_one_example_list:[],
                second_img_two_example_list:[],
                three_img_example_list:[],
                four_img_one_example_list:[],
                four_img_two_example_list:[],
                bar_img_example_list:[],
                destory_img_example_list:[],
                shop_img_example_list:[],
                upload_tip:'只能上传jpg/png/gif文件，且不超过500kb，仅允许上传一张',
                child_content:''
            }
        },
        methods: {
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                         that.confirmSubmit();
                    }else{
                        setTimeout(()=>{
                          const is_error=document.getElementsByClassName('is-error');
                          is_error[0].querySelector('input').focus();
                        },100);
                        return false;
                    }
                })
            },
            confirmSubmit(){
                this.loading=true;
                this.button_name='正在提交';
                var send_data={
                    auto_audit:this.form.auto_audit,
                    auto_audit_time:this.form.auto_audit_time,
                    first_img_example:this.form.first_img_example,
                    second_img_one_example:this.form.second_img_one_example,
                    second_img_two_example:this.form.second_img_two_example,
                    three_img_example:this.form.three_img_example,
                    four_img_one_example:this.form.four_img_one_example,
                    four_img_two_example:this.form.four_img_two_example,
                    bar_img_example:this.form.bar_img_example,
                    destory_img_example:this.form.destory_img_example,
                    shop_img_example:this.form.shop_img_example,
                    login_agreement:this.form.login_agreement
                };
                if(this.id!=-1){
                    send_data.id=this.id;
                }
                let that=this;
                SettingEdit(send_data).then(function(response){
                    let code=response.data.code;
                    let type=code==1?'success':'error';
                    that.$message({
                        message:response.data.msg,
                        type:type,
                        onClose:function(e){
                            that.loading=false;
                            that.button_name='立即提交';
                            if(code==1){
                               that.$router.push('/system/setting');
                            }
                        }
                   })
                })
            },
            back(){
                this.$router.go(-1);
            },
            catch_first_img_example_urls(urls){
                this.form.first_img_example=urls[0];
            },
            remove_first_img_example_urls(remove_index){
                if(remove_index==0){
                   this.form.first_img_example='';
                }
            },
            catch_second_img_one_example_urls(urls){
                this.form.second_img_one_example=urls[0];
            },
            remove_second_img_one_example_urls(remove_index){
               if(remove_index==0){
                  this.form.second_img_one_example='';
               }
            },
            catch_second_img_two_example_urls(urls){
                this.form.second_img_two_example=urls[0];
            },
            remove_second_img_two_example_urls(remove_index){
               if(remove_index==0){
                  this.form.second_img_two_example='';
               }
            },
            catch_three_img_example_urls(urls){
                this.form.three_img_example=urls[0];
            },
            remove_three_img_example_urls(remove_index){
                if(remove_index==0){
                   this.form.three_img_example='';
                }
            },
            catch_four_img_one_example_urls(urls){
                this.form.four_img_one_example=urls[0];
            },
            remove_four_img_one_example_urls(remove_index){
                if(remove_index==0){
                   this.form.four_img_one_example='';
                }
            },
            catch_four_img_two_example_urls(urls){
                this.form.four_img_two_example=urls[0];
            },
            remove_four_img_two_example_urls(remove_index){
                if(remove_index==0){
                   this.form.four_img_two_example='';
                }
            },
            catch_bar_img_example_urls(urls){
                this.form.bar_img_example=urls[0];
            },
            remove_bar_img_example_urls(remove_index){
                if(remove_index==0){
                   this.form.bar_img_example='';
                }
            },
            catch_destory_img_example_urls(urls){
                this.form.destory_img_example=urls[0];
            },
            remove_destory_img_example_urls(remove_index){
                if(remove_index==0){
                    this.form.destory_img_example='';
                }
            },
            catch_shop_img_example_urls(urls){
                this.form.shop_img_example=urls[0];
            },
            remove_shop_img_example_urls(remove_index){
                if(remove_index==0){
                    this.form.shop_img_example='';
                }
            },
            //富文本内容
            catchData(e){
               this.form.login_agreement=e;
            },
        },
        created(){
            let that=this;
            SettingInfo().then(function(response){
                if(response.data.code==1){
                    if(response.data.info.auto_audit!=undefined){
                       that.form.auto_audit=response.data.info.auto_audit.toString();
                       that.form.auto_audit_time=response.data.info.auto_audit_time;
                       if(response.data.info.first_img_example.length>0){
                          that.form.first_img_example=response.data.info.first_img_example;
                          that.first_img_example_list=[{
                              name:0,
                              url:response.data.info.first_img_example
                          }];
                       }
                       if(response.data.info.second_img_one_example.length>0){
                          that.form.second_img_one_example=response.data.info.second_img_one_example;
                          that.second_img_one_example_list=[{
                              name:0,
                              url:response.data.info.second_img_one_example
                          }];
                       }
                       if(response.data.info.second_img_two_example.length>0){
                          that.form.second_img_two_example=response.data.info.second_img_two_example;
                          that.second_img_two_example_list=[{
                              name:0,
                              url:response.data.info.second_img_two_example
                          }];
                       }
                       if(response.data.info.three_img_example.length>0){
                          that.form.three_img_example=response.data.info.three_img_example;
                          that.three_img_example_list=[{
                              name:0,
                              url:response.data.info.three_img_example
                          }];
                       }
                       if(response.data.info.four_img_one_example.length>0){
                          that.form.four_img_one_example=response.data.info.four_img_one_example;
                          that.four_img_one_example_list=[{
                              name:0,
                              url:response.data.info.four_img_one_example
                          }];
                       }
                       if(response.data.info.four_img_two_example.length>0){
                          that.form.four_img_two_example=response.data.info.four_img_two_example;
                          that.four_img_two_example_list=[{
                              name:0,
                              url:response.data.info.four_img_two_example
                          }];
                       }
                       if(response.data.info.bar_img_example.length>0){
                          that.form.bar_img_example=response.data.info.bar_img_example;
                          that.bar_img_example_list=[{
                              name:0,
                              url:response.data.info.bar_img_example
                          }];
                       }
                       if(response.data.info.destory_img_example.length>0){
                          that.form.destory_img_example=response.data.info.destory_img_example;
                          that.destory_img_example_list=[{
                              name:0,
                              url:response.data.info.destory_img_example
                          }];
                       }
                       if(response.data.info.shop_img_example.length>0){
                          that.form.shop_img_example=response.data.info.shop_img_example;
                          that.shop_img_example_list=[{
                              name:0,
                              url:response.data.info.shop_img_example
                          }];
                       }
                       that.form.login_agreement=response.data.info.login_agreement;
                       that.child_content=response.data.info.login_agreement;
                       that.id=response.data.info.id;
                    }
                }
            })
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
